<script setup>
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  statsDetail: {
    type: Object,
    default: () => {
      return {}
    }
  },
  isShowData: {
    type: Boolean,
    default: false
  }
})
</script>
<template>
  <div>
    <div
      v-show="isShowData"
      class="fixed z-[1000] top-0 right-0 p-[10px] bg-[#000] bg-opacity-30 text-center leading-[30px] tracking-[1px] text-[34px] font-bold text-[#00ffc2]"
    >
      {{ statsDetail.framesPerSecond || 0 }}
    </div>
    <div class="stat-info" v-show="!isShowData">
      <ul class="space-y-[10px] text-[12px] p-[5px]">
        <li>framesPerSecond：{{ statsDetail.framesPerSecond }}</li>
        <li>
          frameSize：{{
            statsDetail.frameSize ||
            `${statsDetail.frameWidth || 0} x ${statsDetail.frameHeight || 0}`
          }}
        </li>
        <li>framesReceived：{{ statsDetail.framesReceived }}</li>
        <li>framesDecoded：{{ statsDetail.framesDecoded }}</li>
        <li>jitter：{{ statsDetail.jitter }}</li>
        <li>jitterBufferDelay: {{ (statsDetail.jitterBufferDelay || 0).toFixed(4) }}</li>
        <li>packetsLost：{{ statsDetail.packetsLost }}</li>
        <li>packetsReceived：{{ statsDetail.packetsReceived }}</li>
        <li>totalDecodeTime：{{ (statsDetail.totalDecodeTime || 0).toFixed(4) }}</li>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="scss">
.stat-info {
  position: fixed;
  width: 200px;
  right: 0;
  top: 0;
  color: #00ffc2;
  z-index: 1000;
  pointer-events: none;
  padding: 4px;
  background: rgba(0, 0, 0, 0.5);
}
</style>
